<template>
    <div class="login-wrap">
        <div class="auth_logo">
            <img src="../../assets/img/login-logo.png" alt="logo" />
        </div>
        <div class="ms-login">
            <div class="ms-title">账号登录</div>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                <el-form-item prop="username">
                    <el-input v-model="param.username" placeholder="用户名">
                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="密码" v-model="param.password" @keyup.enter.native="submitForm()">
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm()">登录</el-button>
                </div>
                <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">忘记密码<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item divided command="forgetPwd">已有邮箱，点击重置</el-dropdown-item>
                        <el-dropdown-item>未注册邮箱，请联系管理员：13952382076</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-form>
        </div>
        <el-dialog title="忘记密码" :visible.sync="dialogVisible" width="30%" style="min-width:1275px" :before-close="handleClose">
            <el-form label-width="100px" :model="ruleForm" status-icon :rules="pwardRules" ref="pwardRulesFormRef">
                <el-form-item label="邮箱" prop="mail">
                    <el-input v-model="ruleForm.mail" clearable></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="securityCode">
                    <el-input clearable v-model="ruleForm.securityCode" style="width: 60%; margin-right: 4px"></el-input
                    ><el-button v-show="show" @click="getCode">获取验证码</el-button
                    ><el-button v-show="!show" @click="getCode">{{ count }}秒</el-button>
                </el-form-item>

                <el-form-item label="新密码" prop="pass">
                    <el-input clearable type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="checkPass">
                    <el-input clearable type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetForm('pwardRulesFormRef')">取 消</el-button>
                    <el-button type="primary" @click="submitForgetPWD">确 定</el-button>
                    <!--
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import loginApi from '@/api/login';
import dashboardApi from '../../api/dashboard';
export default {
    data: function () {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.pwardRulesFormRef.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            dialogVisible: false,
            param: {
                username: '',
                password: ''
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            },
            ruleForm: {},
            pwardRules: {
                mail: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                securityCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
                pass: [
                    { validator: validatePass, trigger: 'blur', required: true },
                    {
                        min: 6,
                        max: 30,
                        message: '长度在 6 到 20 个字符'
                    },
                    {
                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
                        message: '密码必须是由6-20位字母+数字组合'
                    }
                ],
                checkPass: [{ validator: validatePass2, trigger: 'blur', required: true }]
            },
            show: true,
            count: '',
            timer: null
        };
    },
    methods: {
        handleCommand(command) {
            if (command == 'forgetPwd') {
                this.dialogVisible = true;
            }
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false
        },
        submitForm() {
            // this.$refs.login.validate((valid) => {
            //     if (valid) {
            //         this.$message.success('登录成功');
            //         localStorage.setItem('ms_username', this.param.username);
            //         this.$router.push('/');
            //     } else {
            //         this.$message.error('请输入账号和密码');
            //         return false;
            //     }
            // });
            this.$refs.login.validate((valid) => {
                if (valid) {
                    this.$store.dispatch('Login', this.param).then((res) => {
                        console.log(res);
                        if (res.success == true) {
                            this.$message.success('登录成功');
                            this.$router.push('/');
                        } else {
                            this.$message.error('账号或密码错误！');
                        }
                    });
                } else {
                    this.$message.error('请输入账号和密码');
                    return false;
                }
            });
        },
       /* forgetPwd() {
            this.dialogVisible = true;
        },*/
        async getCode() {
            console.log(this.ruleForm.mail);
            if (this.ruleForm.mail == '' || this.ruleForm.mail == null || this.ruleForm.mail == undefined) {
                this.$notify({
                    title: '提示',
                    message: '邮箱不为空!',
                    duration: 0
                });
                return;
            }
            await dashboardApi.getCode(this.ruleForm.mail).then((res) => {
                if (res.code == 410) {
                    this.$notify({
                        title: '提示',
                        message: '该邮箱未注册，请填写本人的正确邮箱！!',
                        duration: 0
                    });
                } else {
                    const TIME_COUNT = 60;
                    if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.show = false;
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--;
                            } else {
                                this.show = true;
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000);
                    }
                }
            });
        },
        async submitForgetPWD() {
            await dashboardApi.submitForgetPwd(this.ruleForm.mail, this.ruleForm.securityCode, this.ruleForm.pass).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.$notify({
                        title: '提示',
                        message: '密码重置成功!',
                        duration: 0
                    });
                    this.dialogVisible = false;
                } else {
                    this.$notify({
                        title: '提示',
                        message: '验证码错误!',
                        duration: 0
                    });
                }
            });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(() => {
                    this.resetForm('pwardRulesFormRef');
                    this.dialogVisible = false;
                })
                .catch(() => {});
        }
    }
};
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/login-bg.jpg);
    background-size: 100%;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #676a6c;
    border-bottom: 1px solid #ddd;
}
.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
}
.ms-content {
    padding: 30px 30px;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}
.auth_logo {
    width: 960px;
    margin: 20px auto;
    padding: 0;
    font-family: 'Microsoft YaHei';
    font-size: 13px;
    color: #676a6c;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}
.el-icon-arrow-down {
    font-size: 12px;
}
</style>
